<template>
  <div class="departments">
    <el-card class="box-card">
      <div class="main">
        <div class="top" style="margin-bottom: 20px">
          <div class="name">东软</div>
          <div class="manager">负责人</div>
          <el-dropdown>
            <div class="option">操作 <i class="el-icon-arrow-down" /></div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="addEvent">添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-tree :data="list" :props="{ label: 'name' }" default-expand-all>
          <template v-slot="{ data }">
            <div class="top" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <el-dropdown>
                <div class="option">操作 <i class="el-icon-arrow-down" /></div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click.native="addEvent2(data.id)">添加子部门</el-dropdown-item>
                    <el-dropdown-item @click.native="editEvent(data)">编辑部门</el-dropdown-item>
                    <el-dropdown-item @click.native="delEvent(data.id)">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 弹框组件 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartment, companyDepartmentDel } from '@/api/departments'
import Add from './components/add.vue'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      initList: []
    }
  },
  // 初始化数据
  async created() {
    this.getData()
  },
  methods: {
    // 调用接口获取数据
    async getData() {
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
    },
    // 将数据树形化
    changeData(arr, pid) {
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 添加部门
    addEvent() {
      this.$refs.add.show = true
      this.$refs.add.form.pid = ''
      this.$refs.add.mode = 'add'
    },
    // 添加子部门
    addEvent2(id) {
      this.$refs.add.show = true
      this.$refs.add.form.pid = id
      this.$refs.add.mode = 'add'
    },
    // 删除部门
    async delEvent(id) {
      await this.$confirm('您确定删除该部门数据吗？', '温馨提示')
      await companyDepartmentDel(id)
      this.$message.success('删除成功')
      // 刷新列表
      this.getData()
    },
    // 编辑部门
    editEvent(data) {
      this.$refs.add.show = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(data)) // 深拷贝，如果不进行此操作，则堆中的form和data会指向栈中的同一个地址
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    width: 80%;
    margin: auto;
  }
  .top {
    display: flex;
    .name {
      flex: 1;
    }
    .manager {
      width: 200px;
    }
  }
}

</style>
